<template>
  <div class="DiagonalBarChart-box">
    <!-- 斜纹柱状图 -->
    <div
      ref="myChartsRef"
      :style="{ height: height, width: width }"
      class="echarts"
    ></div>
  </div>
</template>
<script setup>
import { nextTick } from "vue"
const emit = defineEmits(["click_Fun"])
const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties

const props = defineProps({
  width: {
    default: "100%",
    type: String 
  },
  height: {
    default: "100%",
    type: String 
  },
  DiagonalBarChartObj: {
    type: Object
  }
})

const myChartsRef = ref()

const DiagonalBarChartObj = ref({})

// 渲染echarts
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(myChartsRef.value)
  if (myChart) {
    myChart.dispose()
  }
  myChart = $echarts.init(myChartsRef.value)

  let dataZoomMove = {
    start: 0,
    end: 5
  }
  let xdata = DiagonalBarChartObj.value.Xdata
  let sdata = DiagonalBarChartObj.value.Ydata
  let option = {
    //你的代码
    tooltip: {
      show: false,
      trigger: "axis"
    },
    dataZoom: [
      {
        // show: sdata.length > 6 ? true : false, // 为true 滚动条出现
        show: false, // 为true 滚动条出现
        realtime: true,
        type: "slider", // 有type这个属性，滚动条在最下面，也可以不行，写y：36，这表示距离顶端36px，一般就是在图上面。
        height: "90%", // 表示滚动条的高度，也就是粗细
        startValue: dataZoomMove.start, // 表示默认展示20%～80%这一段。
        endValue: dataZoomMove.end,
        width: 6, //滚动图例的宽度
        right: "20", //滚动条的位置
        top: "0%", //位置和grid配置注意下
        yAxisIndex: [0, 1], //关联多个y轴
        moveHandleStyle: {
          color: "rgba(89, 202, 241,.5)" // 滚动条的颜色
        },
        moveHandleSize: "6", //滚动条的宽度
        emphasis: {
          moveHandleStyle: {
            color: "rgba(89, 202, 241,.5)"
          }
        },
        textStyle: {
          color: "rgba(255,255,255,0)"
        },
        backgroundColor: "rgba(255,255,255,.1)", //滚动图例的背景色
        borderColor: "rgba(255,255,255,0)", //滚动图例的外框
        fillerColor: "rgba(0,0,0,0)",
        handleSize: "6",
        handleStyle: {
          color: "rgba(255,255,255,0)"
        },
        brushStyle: {
          color: "rgba(129, 243, 253)"
        }
      },
      {
        //没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
        type: "inside",
        yAxisIndex: 0,
        zoomOnMouseWheel: false, //滚轮是否触发缩放
        moveOnMouseMove: true, //鼠标滚轮触发滚动
        moveOnMouseWheel: true
      }
    ],
    grid: {
      containLabel: true,
      bottom: "5%",
      left: "0%",
      top: "5%",
      right: "5%"
    },
    xAxis: {
      type: "value",
      axisLabel: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      }
    },
    yAxis: [
      {
        type: "category",
        data: xdata,
        inverse: true,
        axisLabel: {
          interval: 0, //使x轴文字显示全
          fontSize: "18px",
          inside: false,
          verticalAlign: "center",
          padding: [0, 0, 0, 0],
          margin: 20, //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            // console.log("formatterformatter", value, index);
            // if (index < 3) {
            //   return `{img${index}|${xdata.indexOf(value) + 1}} {a|${value}}`
            // } else {
            return ` {a|${value}}`
            // }
          },
          rich: {
            a: {
              fontSize: fontSize(
                props.DiagonalBarChartObj.fontSize
                  ? props.DiagonalBarChartObj.fontSize
                  : 30
              ),
              color: "#fff",
              padding: [0, 0, 0, 15],
              width: 50
            },
            b: {
              fontSize: fontSize(
                props.DiagonalBarChartObj.fontSize
                  ? props.DiagonalBarChartObj.fontSize
                  : 30
              ),
              color: "#8891B0",
              padding: [4, 15, 0, 15]
            }
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#13387a"
          }
        }
      },
      {
        type: "category",
        data: xdata,
        inverse: true,
        padding: [0, 0, 0, 0],
        axisLabel: {
          inside: false,
          verticalAlign: "center",
          padding: [0, 0, 0, 0],
          margin: 20, //刻度标签与轴线之间的距离
          formatter: function (value, index) {
            return `{a|${sdata[xdata.indexOf(value)]}} {b|万元}`
          },
          rich: {
            a: {
              fontWeight: 900,
              fontSize: fontSize(
                props.DiagonalBarChartObj.fontSize
                  ? props.DiagonalBarChartObj.fontSize
                  : 30
              ),
              fontFamily: "Barlow Condensed SemiBold",
              color: "#59F9E1",
              padding: [4, 0, 0, 0]
            },
            b: {
              fontSize: fontSize(
                props.DiagonalBarChartObj.fontSize
                  ? props.DiagonalBarChartObj.fontSize
                  : 30
              ),
              fontFamily: "Barlow Condensed SemiBold",
              color: "#fff",
              padding: [4, 0, 0, 0]
            }
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: "#13387a"
          }
        }
      }
    ],
    series: [
      {
        data: sdata,
        type: "bar",
        barWidth: fontSize(20), //宽度
        borderRadius: 30,
        showBackground: true,
        verticalAlign: "center",

        backgroundStyle: {
          color: "rgba(66, 114, 112)",
          borderRadius: 30
        },
        zlevel: 10,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(89, 140, 138,1)" // 0% 处的颜色
            },
            // {
            //   offset: 0.2,
            //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
            // },
            {
              offset: 1,
              color: "rgba(98, 232, 217, 1)" // 100% 处的颜色
            }
          ]
        },

        itemStyle: {
          verticalAlign: "center",
          zlevel: 10,
          borderRadius: 30,
          borderWidth: 0,
          decal: {
            color: "rgba(255,255,255,0.3)", //条纹颜色
            symbol: "rect",
            symbolSize: 1,
            dashArrayY: [1, 0],
            dashArrayX: 7,
            rotation: 60
          },
          emphasis: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(255, 68, 0, 1)" // 0% 处的颜色
                },
                // {
                //   offset: 0.2,
                //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
                // },
                {
                  offset: 1,
                  color: "rgba(223, 45, 44, 1)" // 100% 处的颜色
                }
              ]
            }
          }
        }
      },
      {
        // name: "主系列",
        type: "bar",
        data: sdata,
        barGap: "-100%",
        zlevel: 10,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: "rgba(101, 211, 230, 0.2)" // 0% 处的颜色
            },
            // {
            //   offset: 0.2,
            //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
            // },
            {
              offset: 1,
              color: "rgba(101, 211, 230,0.3)" // 100% 处的颜色
            }
          ]
        },
        itemStyle: {
          borderRadius: 30,
          borderWidth: 0,
          emphasis: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 0,
              colorStops: [
                {
                  offset: 0,
                  color: "rgba(101, 211, 230, 0.2)" // 0% 处的颜色
                },
                // {
                //   offset: 0.2,
                //   color: "rgba(1,249,266,0.3)" // 0% 处的颜色
                // },
                {
                  offset: 1,
                  color: "rgba(101, 211, 230,1)" // 100% 处的颜色
                }
              ]
            }
          }
        },
        barWidth: fontSize(20) //宽度
      }
      // {
      //   type: "pictorialBar",
      //   // symbol: "react",
      //   symbolSize: [3, 28],
      //   symbolOffset: [5, 0],
      //   zlevel: 12,
      //   itemStyle: {
      //     color: "#fff",
      //     borderRadius: 3,
      //     shadowColor: "#006BFF",
      //     shadowBlur: 10
      //   },
      //   data: sdata1
      // }
    ]
  }

  setTimeout(() => {
    myChart.resize()
  }, 1000)
  myChart.setOption(option)
}

onMounted(() => {
  addEventListener("resize", () => {
    initEcharts()
  })
})

watch(
  () => props.DiagonalBarChartObj,
  (val) => {
    console.log(val)
    DiagonalBarChartObj.value = val
    nextTick(() => {
      initEcharts()
    })
  },
  {
    deep: true,
    immediate: true
  }
)
</script>
<style scoped lang="less">
.DiagonalBarChart-box {
  width: 100%;
  height: 100%;
  position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
